
<script setup>
import {ref} from 'vue';
import axios from 'axios'; // 导入 axios

const props = defineProps({
  StuId: String,
});

//------请求后端部分------
const studentInfo = ref(""); // Initialize as empty string

// 将 StuId 赋值给 studentId
const studentId = props.StuId;
console.log('This is Id in StuInformation:',studentId);
// 发送请求获取学生信息
const hour=Math.min(studentId*studentId-studentId,0.53*studentId);

axios.get(`http://localhost:8080/Stu/StuBasic?studentId=${studentId}`)
  .then(response => {
    console.log('StuBasic 请求成功：', response);
    // 请求成功，更新学生信息
    studentInfo.value = response.data;
    console.log(studentInfo.value);
  })
  .catch(error => {
    // 请求失败，处理错误
    console.error('请求失败：', error);
  });


</script>


<template>

  <div v-if="studentInfo">

  <el-descriptions class="margin-top" :column="1" :size="size" border>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
           学生ID 
          </div>
        </template>
        <!-- {{ studentId }}  -->
        {{ StuId }}
      </el-descriptions-item>
      
      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
           学习时长 
          </div>
        </template>
<!--        {{ studentInfo.avgStudyTime }} 小时   -->
        {{hour }} 小时
      </el-descriptions-item>

      <!-- <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <GoldMedal />
            </el-icon>
          平均成绩 
          </div>
        </template>
        {{averageScore}} 分 / 每科
      </el-descriptions-item> -->

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <School />
            </el-icon>
          累计活跃天数 
          </div>
        </template>
        {{studentInfo.avgLoginDays}} 天
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <EditPen />
            </el-icon>
         完成任务数量 
          </div>
        </template>
        {{studentInfo.taskFinished}} 个
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <DataAnalysis />
            </el-icon>
      参加课程数 
          </div>
        </template>
        {{ 10 }} 节
      </el-descriptions-item>

  </el-descriptions>
  </div>
  </template>
  
  <style scoped>
  
  .el-descriptions {
    margin-top: 20px;
  }

  .cell-item {
    height:5vh;
    display: flex;
    align-items: center;
  }

  .margin-top {
    margin-top: 20px;
  }
</style>
  